<template>
	<view class="page-container">
		<!-- 头部轮播 -->
		<view class="container-swiper" :style="{background:swiperList[currentNum]&&swiperList[currentNum].color}"
			style="height: 330rpx;">
			<!-- #ifdef MP -->
			<view class="swiper-search" style="padding: 10rpx 20rpx;" @click="handleGoSearch">
				<u-search shape="round" placeholder="请搜索宝贝名称" :showAction="false" inputAlign="center" height="50rpx">
				</u-search>
			</view>
			<!-- #endif -->
			<swiper class="pic-swiper" circular :autoplay="true" :interval="2000" :duration="500"
				@change="handleGetCurrent">
				<swiper-item v-for="(item,index) in swiperList" :key="item.id"
					style="display: flex;justify-content: center;">
					<image :src="item.imgUrl" @click="navToAdverTargetPage(item)" style="width: 95%;height: 100%;border-radius: 20rpx;"></image>
				</swiper-item>
			</swiper>
			<view class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
			</view>
		</view>
		<view class="isolation" style="margin-top:30rpx ;"></view>

		<!-- 类别 -->
		<view class="container-style">
			<view class="style-box">
				<view v-for="item in stylelist" :key="item.id" @click="navToAdverTargetPage(item)">
					<image :src="item.imgUrl" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
					<text style="font-size: 25rpx;">{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="isolation"></view>
		<!-- 公告 -->
		<view class="container-advice">
			<u-notice-bar :text="textlist" direction="column" color="#FB7894"></u-notice-bar>
		</view>
		<view class="isolation"></view>
		<!-- 图片模块 -->
		<view class="container-pic">
			<swiper class="pic-swiper" circular :indicator-dots="false" :autoplay="false" :interval="1000"
				:duration="500">
				<swiper-item v-for="item in piclist" :key="item.id" >
					<image :src="item.imgUrl" style="width: 100%;height:350rpx;" @click="navToAdverTargetPage(item)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="isolation"></view>
		<!-- 橱窗推荐 -->
		<view class="container-window" v-if="shopWindowlist.length">
			<view class="window-title">
				<image src="../../static/image/h1.png" mode="widthFix" style="width: 80rpx;"></image>
				<view class="">
					<view>橱窗推荐</view>
					<view>Shop Window</view>
				</view>
			</view>
			<view>
				<swiper class="swiper" circular :autoplay="false" :duration="500">
					<swiper-item v-for="item in shopWindowGroup" :key="item.id">
						<u-row gutter="40rpx" justify="">
							<u-col :span="index%2==0?7:5" v-for="(data,index) in item" :key="data.id">
								<view v-if="index%2==0">
									<image :src="data.data.img"
										style="width: 100%;height: 480rpx;border-radius: 10rpx;" @click="navToDetailPage(data.data.id)"></image>
								</view>
								<view>{{data.data.title}}</view>
								<view style="color: #FB7894;">
									<text>￥{{data.data.price*0.01}}</text>
									<text style="text-decoration: line-through;color: gray;margin-left: 10rpx;"
										v-if="data.data.price !==data.data.originalPrice">￥{{data.data.originalPrice*0.01}}</text>
								</view>
								<view>累计销售:{{data.data.sales}}</view>
								<view v-if="index%2 !== 0">
									<image :src="data.data.img"
										style="width: 100%;height: 480rpx;border-radius: 10rpx;" @click="navToDetailPage(data.data.id)"></image>
								</view>
							</u-col>
						</u-row>

					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="isolation" v-if="shopWindowlist.length"></view>

		<!-- 分类精选 -->
		<view class="container-category">
			<view class="category-title">
				<image src="../../static/image/h1.png" mode="widthFix" style="width: 80rpx;"></image>
				<view class="">
					<view>分类精选</view>
					<view>Competitive Products For You</view>
				</view>
			</view>
			<view class="category-content" v-if="category">
				<view style="width: 100%;height: 500rpx;background-position: center;background-size: cover;"
					:style="{backgroundImage: 'linear-gradient(to top, #FFFFFF, transparent),url('+category.imgUrl+')'}">
				</view>
				<view class="content-scroll">
					<scroll-view class="scroll-view_H" scroll-x="true" :enable-flex="true">
						<view v-for="item in category.data" :key="item.id" class="scroll-view-son" @click="navToDetailPage(item.id)">
							<image :src="item.img" style="width: 180rpx;height: 180rpx;"></image>
							<view
								style="width: 180rpx;text-align: center; text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
								{{item.title}}
							</view>
							<view style="text-align: center;color:red;">￥{{item.price}}</view>
						</view>
						<view class="scroll-view-son">
							<view class="last-son">
								<view>查看全部</view>
								<view>More+</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="isolation"></view>
		<!-- 热销宝贝 -->
		<view class="container-hot">
			<view class="hot-title">
				<image src="../../static/image/h1.png" mode="widthFix" style="width: 80rpx;"></image>
				<view>
					<view>热销宝贝</view>
					<view>Hot Sale</view>
				</view>
			</view>
			<view class="hot-content">
				<view v-for="item in hotSaleList" :key="item.id" @click="navToDetailPage(item.id)">
					<image :src="item.img" style="width: 100%;height: 280rpx;"></image>
					<view class="title">{{item.title}}</view>
					<view style="color:red;">￥{{item.price}}</view>
				</view>
			</view>
		</view>


		<!-- 底部 -->
		<!-- #ifdef H5 -->
		<view style="width: 100%;height: 100rpx;"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		get,
		post
	} from '@/utils/http.js'
	export default {
		data() {
			return {
				currentNum: 0,
				swiperList: [],
				piclist: [],
				stylelist: [],
				category: null,
				hotSaleList: [],
				shopWindowlist: [],
				textlist: ['智学无忧牛逼', "智学无忧非常牛逼", '智学无忧无敌牛逼']
			}
		},
		onLoad() {
			get('integral', 'getIndexData').then(res => {
				console.log(res)
				const {
					data,
					errno,
					errmsg
				} = res
				const {
					advertisement,
					newTop,
					salesTop
				} = data
				if (200 === errno) {
					this.swiperList = advertisement.t1 || []
					this.piclist = advertisement.t3 || []
					this.stylelist = advertisement.t4 || []
					this.shopWindowlist = advertisement.t9 || []
					advertisement.t2[0].data.forEach(item => {
						item.originalPrice *= 0.01
						item.price *= 0.01
						item.vipPrice *= 0.01
					})
					salesTop.forEach(item => { 
						item.originalPrice *= 0.01
						item.price *= 0.01
						item.vipPrice *= 0.01
					})
					this.hotSaleList = salesTop || []
					this.category = advertisement.t2[0] || {}

				}
			})
		},
		methods: {
			handleGetCurrent(e) {
				this.currentNum = e.detail.current

			},
			handleGoSearch() {
				uni.navigateTo({
					url: '/pages/index/search'
				})
			},
			navToDetailPage(id){
				uni.navigateTo({
					url:`/pages/product/detail?id=${id}`
				})
			},
			navToAdverTargetPage(advert) {
				const {
					unionType,
					unionValue
				} = advert
				let url = '/pages/index/index'
				switch (unionType) {
					case 1:
						url = `/pages/product/detail?id=${unionValue}`
						break;
					case 2:
						url = `/pages/product/list?tid=${unionValue}`
						break;
					case 3:
						url = `/pages/product/list?keyword=${unionValue}`
						break;
					default:
						url = unionValue
						break;
				}
				uni.navigateTo({
					url:url
				})
			}
		},
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: `/pages/index/search?id=${123123}`
			})
		},
		computed: {
			/**
			 * 将橱窗数组转换成二维数组
			 */
			shopWindowGroup() {
				let tempArr = []
				for (var i = 0; i < this.shopWindowlist.length; i++) {
					let arr = []
					arr.push(this.shopWindowlist[i])
					let item = this.shopWindowlist[++i]
					if (item) {
						arr.push(item)
					}
					tempArr.push(arr)
				}
				return tempArr
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container-swiper {
		position: relative;
		left: 0;
		top: 0;

		padding-top: 44px;
	}

	.page-container,
	uni-page-body {
		height: 100%;

		.pic-swiper {
			height: 350rpx;

			uni-swiper-item {
				display: flex;
				justify-content: center;
			}
		}

		.swiper-search {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1000;
			// background-color: #FFFFFF;
			width: 95%;
		}

		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 70rpx;
			// height: 60rpx;
			@include flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 70rpx;
			bottom: 20rpx;
			background-position: center;
			background-size: cover;

			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}

		.container-style {

			.style-box {
				display: flex;

				>view {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.container-advice {
			>.swiper {
				height: 40rpx;
			}
		}

		.container-window {
			// height: 800rpx;
			font-size: 30rpx;

			.swiper {
				height: 620rpx;
			}

			.window-title {
				display: flex;
				align-items: center;
				font-size: 25rpx;
				padding: 10rpx 20rpx;

				image {
					margin-right: 10rpx;
				}
			}
		}

		.container-category {

			// height: 400rpx;
			.category-title {
				display: flex;
				align-items: center;
				padding: 10rpx 20rpx;
				font-size: 25rpx;

				image {
					margin-right: 10rpx;
				}
			}

			.category-content {
				position: relative;

				.content-scroll {
					width: 95%;
					// height: 260rpx;
					position: absolute;
					background-color: white;
					bottom: 0;
					right: 0;

					/deep/.uni-scroll-view-content {
						display: flex;
					}

					.scroll-view_H {
						white-space: nowrap;
						display: flex;
						height: 260rpx;
						font-size: 25rpx;
					}

					.scroll-view-son {
						padding: 10rpx;

						.last-son {
							width: 180rpx;
							height: 180rpx;
							background-color: aliceblue;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}

		.container-hot {
			padding: 0 20rpx;

			.hot-title {
				display: flex;
				align-items: center;
				padding: 10rpx 20rpx;
				font-size: 25rpx;

				image {
					margin-right: 10rpx;
				}
			}

			.hot-content {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				text-align: center;
				font-size: 25rpx;

				>view {
					width: 46%;
					margin-bottom: 10rpx;

					.title {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						margin: 10rpx 0;
					}
				}
			}
		}
	}

	.u-row {
		width: 100%;
		// display: flex;
	}

	// // 滚动条样式
	// /deep/ ::-webkit-scrollbar {
	// 	/*滚动条整体样式*/
	// 	width: 4px !important;
	// 	height: 1px !important;
	// 	overflow: auto !important;
	// 	background: #ccc !important;
	// 	-webkit-appearance: auto !important;
	// 	display: block;
	// }

	// /deep/ ::-webkit-scrollbar-thumb {
	// 	/*滚动条里面小方块*/
	// 	border-radius: 10px !important;
	// 	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
	// 	background: #7b7979 !important;
	// }

	// /deep/ ::-webkit-scrollbar-track {
	// 	/*滚动条里面轨道*/
	// 	// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
	// 	// border-radius: 10px !important;
	// 	background: #FFFFFF !important;
	// }
</style>
